<script>
	// import AuthButton from '../AuthButton/index'
	export default {
		name: 'TablePaging',
		// components: { AuthButton },
		props: {
			maxHeight: {
				type: String,
				default: '100%'
			},
			tableList: {
				// table 数据
				type: Array,
				default: () => []
			},
			tableColumn: {
				// table 的 column
				type: Array,
				default: () => []
			},
			tableButtons: {
				// table 按钮
				type: Array,
				default: () => []
			},
			tableBtnWidth: {
				// 按钮宽度
				type: Number,
				default: 200
			},
			tablePaging: {
				// table 分页配置
				type: Object || Boolean,
				default: false
			},
			tableTotal: {
				// table 总页数
				type: Number,
				default: 0
			},
			pagingChange: {
				// 分页信息改变
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				defaultAttars: {
					// 按钮默认配置
					type: 'text',
					size: 'small'
				}
			}
		},
		methods: {
			handleClick(e, row, click) {
				// 表单按钮点击
				e && e.stopPropagation && e.stopPropagation()
				click && click(row.id, row)
			},
			handleSizeChange(size) {
				// 分页一页显示条数改变回调
				this.$emit('pagingChange', {
					...this.tablePaging,
					pagesize: size
				})
			},
			handleCurrentChange(page) {
				// 分页当前页数改变回调
				this.$emit('pagingChange', {
					...this.tablePaging,
					page
				})
			},
			indexMethod(index) {
				// 序号格式化
				const { page = 1, pagesize = 10 } = this.tablePaging
				return (page - 1) * pagesize + index + 1
			},

			createslotScope(list) {
				return {
					scopedSlots: {
						default: scope => {
							return list.map(btn => {
								if (typeof btn.isHide === 'function') {
									// 判断按钮是否隐藏
									if (btn.isHide(scope)) return null
								} else if (btn.isHide) {
									return null
								}
								if (btn.confirm) {
									return (
										<el-popconfirm
											class="pop-confirm"
											title={typeof btn.confirm === 'function' ? btn.confirm(scope) : btn.confirm}
											{...{ on: { onConfirm: e => this.handleClick(e, scope.row, btn.click) } }}
										>
											<auth-button
												authKey={btn.authKey}
												slot="reference"
												class={{ gray: btn.isGray }}
												otherAttrs={{ ...this.defaultAttars, ...btn.attrs }}
												{...{ props: { ...this.defaultAttars, ...btn.attrs } }}
												{...btn.otherAttrs}
												isDisabled={btn.isDisabled ? btn.isDisabled(scope) : false}
											>
												{typeof btn.name === 'function' ? btn.name(scope) : btn.name}
											</auth-button>
										</el-popconfirm>
									)
								}
								return (
									<auth-button
										authKey={btn.authKey}
										class={{ gray: btn.isGray }}
										otherAttrs={{ ...this.defaultAttars, ...btn.attrs }}
										{...{ on: { click: e => this.handleClick(e, scope.row, btn.click) } }}
										{...{ props: { ...this.defaultAttars, ...btn.attrs } }}
										{...btn.otherAttrs}
										isDisabled={btn.isDisabled ? btn.isDisabled(scope) : false}
									>
										{typeof btn.name === 'function' ? btn.name(scope) : btn.name}
									</auth-button>
								)
							})
						}
					}
				}
			},
			createColumn(list = [], _h) {
				return list.map(e => {
					if (e.children) {
						return this.createColumn(e.children, _h)
					} else {
						return (
							<el-table-column
								key={e.key}
								type={e.type}
								prop={e.key}
								label={e.label}
								width={e.width}
								min-width={e.minWidth}
								{...{
									scopedSlots: {
										default: scope => {
											return e.render ? e.render(_h, scope) : scope.row[e.key]
										}
									}
								}}
							/>
						)
					}
				})
			}
		},
		render(h) {
			const { tableList, tablePaging, tableTotal, handleSizeChange, handleCurrentChange } = this
			return (
				<div class="tablePaging">
					<el-table
						data={this.tableList}
						max-height={this.$props.maxHeight}
						{...{ props: this.$attrs, on: this.$listeners }}
					>
						<el-table-column type="index" label="No" min-width={100} index={this.indexMethod} />
						{this.tableColumn.map(item => {
							if (item.type === 'button') {
								return (
									<el-table-column
										label={item.label || '操作'}
										width={this.tableBtnWidth}
										{...this.createslotScope(item.list)}
									></el-table-column>
								)
							}
							return (
								<el-table-column
									key={item.key}
									type={item.type}
									prop={item.key}
									label={item.label}
									width={item.width}
									min-width={item.minWidth}
									{...{
										scopedSlots: {
											default: scope => {
												return item.render ? item.render(h, scope) : scope.row[item.key]
											}
										}
									}}
								>
									{this.createColumn(item.children, h)}
								</el-table-column>
							)
						})}
						{this.tableButtons.length ? (
							<el-table-column
								label="操作"
								width={this.tableBtnWidth}
								{...this.createslotScope(this.tableButtons)}
							></el-table-column>
						) : null}
					</el-table>

					{tablePaging && tableList.length ? (
						<el-pagination
							background
							current-page={tablePaging.page || 1}
							page-sizes={tablePaging.pageSizes || [5, 10, 20, 30, 40]}
							page-size={tablePaging.pagesize || 10}
							layout="prev, pager, next, sizes, jumper, total"
							total={tableTotal}
							onSize-change={handleSizeChange}
							onCurrent-change={handleCurrentChange}
						/>
					) : null}
				</div>
			)
		}
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>
